import styled from 'styled-components'

export const PicturesWrapper = styled.div`
	position: relative;

	> .pictures {
		display: flex;
		height: 580px;
		background: #fff;

		&:hover {
			.cover {
				background-color: rgba(0, 0, 0, 0.4) !important;
				opacity: 1 !important;
			}

			.item:hover {
				.cover {
					opacity: 0 !important;
				}
			}
		}
	}

	.left,
	.right {
		width: 50%;
		height: 100%;

		.item {
			position: relative;
			height: 100%;
			overflow: hidden;
			cursor: pointer;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;

				transition: transform 300ms ease-in;
			}

			.cover {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.3);
				opacity: 1;
				transition: opacity 300ms ease;
				transition: background-color 300ms ease;
			}

			&:hover {
				img {
					transform: scale(1.03);
				}
			}
		}
	}

	.right {
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 50%;
			height: 50%;
		}
	}

	.showBtn {
		width: 88px;
		height: 36px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 0 6px #666;
		color: #484848;
		font-style: 14px;
		font-weight: 600;
		line-height: 36px;
		text-align: center;
		cursor: pointer;

		position: absolute;
		bottom: 30px;
		right: 30px;
	}
`
